<template>
  <view>
    <!-- 车牌号键盘 -->
    <view class="my-input-box">
      <view class="my-input" v-if="car_id.length" @click="showPlate">{{
        car_id
      }}</view>
      <view v-else class="my-input placehol" @click="showPlate"
        >请输入车牌号</view
      >
      <view class="new" :class="{ isNew: isNew }" @click.stop="clickNew"
        >新能源</view
      >
    </view>
    <u-keyboard
      mode="car"
      :isNew="isNew"
      :show="plateShow"
      @change="valChange"
      :showCancel="false"
      @isNewFu="clickNew"
      :showConfirm="false"
      @backspace="backspace"
      @confirm="confirmCarId"
      @close="keyboardClose"
      :closeOnClickOverlay="true"
      @cancel="keyboardClose"
      :tips="car_id"
    >
    </u-keyboard>
  </view>
</template>

<script>
export default {
  name: 'PicensePlateNumber',
  props: {},
  components: {},
  data() {
    return {
      isNew: false,
      plateShow: false,
      car_id: ''
    }
  },
  methods: {
    // 按键被点击(
    valChange(val) {
      let tempVal = this.car_id
      if (this.isNew) {
        if (tempVal.length < 8) {
          this.car_id += val
          this.$emit('carIdVal', { carId: this.car_id, isNew: this.isNew })
        } else if (tempVal.length === 8) {
          this.plateShow = false
          this.$emit('carIdVal', { carId: this.car_id, isNew: this.isNew })
        }
      } else {
        if (tempVal.length < 7) {
          this.car_id += val
          this.$emit('carIdVal', { carId: this.car_id, isNew: this.isNew })
        } else if (tempVal.length === 7) {
          this.plateShow = false
          this.$emit('carIdVal', { carId: this.car_id, isNew: this.isNew })
        }
      }
    },
    // 退格键被点击
    backspace() {
      // 删除value的最后一个字符
      // if (this.carIdValue.length) this.carIdValue = this.carIdValue.substr(0, this.carIdValue.length - 1);
      let tempLen = this.car_id.length
      if (tempLen !== 0) {
        this.car_id = this.car_id.substr(0, tempLen - 1)
      } else {
        this.plateShow = false
      }
    },
    // 新源车牌
    clickNew() {
      if (!this.isNew) {
        this.plateShow = true
      }
      this.isNew = !this.isNew
      if (!this.isNew && this.car_id.length === 8) {
        this.car_id = this.car_id.substr(0, 7)
      }
    },
    keyboardClose() {
      // console.log('keyboardClose')
      this.plateShow = false
      this.$emit('carIdVal', { carId: this.car_id, isNew: this.isNew })
    },
    // confirmCarId() {
    //   console.log('keyboardClose')
    //   // this.plateShow = false
    //   this.$emit('carIdVal', { carId: this.car_id, isNew: this.isNew })
    // },
    showPlate() {
      this.plateShow = true
    }
  }
}
</script>

<style lang='scss' scoped>
.my-input-box {
  // position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  border: #dadbde solid 0.5px;
  .my-input {
    flex: 1;
    padding: 6px 10px;
    font-size: 14px;
    color: #666;
    width: 80px;
    // border-bottom: 1px solid #ddd;
    line-height: 24px;
    // height: 35px;
  }
  .placehol {
    flex: 1;
    color: #999 !important;
    font-size: 12px !important;
  }
  // 车牌号
  .new {
    font-size: 12px;
    border: #999 solid 1px;
    color: #999;
    padding: 0px 6rpx;
    border-radius: 8rpx;
    margin-right: 10px;
  }
  .isNew {
    border: #19b927 solid 1px !important;
    color: #19b927 !important;
  }
}
</style>